<template>
  <v-app>
    <v-navigation-drawer v-model="drawer" permanent :rail="rail">
      <v-list>
        <v-list-item prepend-avatar="https://randomuser.me/api/portraits/men/85.jpg" title="John Leider" />
      </v-list>
      <v-list density="compact" nav>
        <v-list-item prepend-icon="mdi-home-city" title="Home" to="/prompt" value="home" />
        <v-list-item prepend-icon="mdi-account" title="My Account" to="/playground" value="account" />
        <v-list-item prepend-icon="mdi-account-group-outline" title="Users" value="users" />
      </v-list>
    </v-navigation-drawer>
    <v-app-bar class="border-b-sm" elevation="0">
      <v-app-bar-nav-icon @click="rail = !rail" />
      <v-breadcrumbs :items="['Person', 'Prompt']">
        <template #prepend>
          <v-avatar size="x-small">
            <v-img src="https://randomuser.me/api/portraits/men/85.jpg" />
          </v-avatar>
        </template>
        <template #divider>
          <v-icon icon="mdi-chevron-right" />
        </template>
      </v-breadcrumbs>
    </v-app-bar>
    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

<script lang="ts" setup>
//
import { ref } from 'vue'

const drawer = ref(true)
const rail = ref(true)

</script>
